<template>
  <div v-if="!showHistory">
    <Search ref="searchRef" @search="handleSearch" />
    <div class="equip-table-btn">
      <!-- <px-button v-has="'ALL_ALERT_RULES_ALARM_POINT_EXPORT'" style="margin-right: 8px" type="primary" @click="handleExport">查询并导出</px-button> -->
      <px-button v-has="'ALL_ALERT_RULES_ALARM_POINT_DOWNLOAD'" style="margin-right: 8px" type="primary" @click="handleDownload">下载模板</px-button>
      <px-upload v-has="'ALL_ALERT_RULES_ALARM_POINT_IMPORT'" action="#" :http-request="handleImport" :show-file-list="false" accept=".xlsx, xls">
        <px-button style="margin-right: 8px" plain>批量导入更新</px-button>
      </px-upload>
    </div>
    <px-table :data="tableData" class="equip-table" height="calc(100vh - 380px)" border>
      <px-table-column label="序号" min-width="60" align="center" fixed="left">
        <template #default="{ $index }">
          {{ (paginationInfo.currentPage - 1) * paginationInfo.pageSize + $index + 1 }}
        </template>
      </px-table-column>
      <px-table-column prop="point" label="报警点位" width="400" show-overflow-tooltip>
        <template #default="scope">
          <px-text type="primary" style="cursor: pointer" @click="handleShowDetail(scope.row)">{{ scope.row.point }}</px-text>
        </template>
      </px-table-column>
      <px-table-column prop="alarmLevel" label="报警级别" show-overflow-tooltip>
        <template #default="scope">
          <px-tag v-if="scope.row.alarmLevel" style="color: #fff" round :color="tagBgColorList[scope.row.alarmLevel]">
            {{ scope.row.alarmLevel }}
          </px-tag>
          <span v-else />
        </template>
      </px-table-column>
      <px-table-column prop="alarmType" label="报警类型" show-overflow-tooltip />
      <px-table-column prop="alarmDesc" label="报警描述" show-overflow-tooltip />
      <px-table-column prop="factoryName" label="厂区" show-overflow-tooltip />
      <px-table-column prop="classNameDesc" label="科室" show-overflow-tooltip />
      <px-table-column prop="systemName" label="系统" width="160" show-overflow-tooltip />
      <px-table-column prop="twinName" label="所属设备" show-overflow-tooltip />
      <px-table-column prop="twinPosition" label="位置" show-overflow-tooltip />
      <px-table-column fixed="right" label="操作" width="120" align="center">
        <template #default="scope">
          <px-tooltip content="编辑" placement="top">
            <px-button v-has="'ALL_ALERT_RULES_ALARM_POINT_EDIT'" link type="primary" icon="EditPen" @click="handleEdit(scope.row)" />
          </px-tooltip>
          <px-tooltip content="历史" placement="top">
            <px-button v-has="'ALL_ALERT_RULES_ALARM_POINT_HISTORY'" link type="primary" icon="History" @click="handleShowHistory(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <pagination
      v-show="paginationInfo.total > 0"
      v-model:page="paginationInfo.currentPage"
      v-model:limit="paginationInfo.pageSize"
      class="equip-table-pagination"
      :total="paginationInfo.total"
      @pagination="getList"
    />
    <Drawer v-if="drawerVisible" :type="type" :point="point" @refresh="getList" @close="closeDrawer" />
  </div>
  <Teleport to="#alert__rules__index">
    <History v-if="showHistory" :point="point" @refresh="getList" @close="closeHistory" />
  </Teleport>
</template>

<script lang="ts" setup>
import { PxMessage } from "px-ui";
import { useRoute } from "vue-router";
import { computed, getCurrentInstance, reactive, ref } from "vue";

import type { PointItem, QueryForAlarmPointList } from "@/api/alarm";
import { getAlarmPointList, importPoints } from "@/api/alarm";
import type { PaginationType } from "@/type";

import Drawer from "./components/Drawer.vue";
import History from "./components/History.vue";
import Search from "./components/Search.vue";
import type { PageType, QueryParams } from "./type";

const tagBgColorList = {
  一级报警: "#E02B2B",
  二级报警: "#FF771E",
  三级报警: "#F1B11A",
  四级报警: "#4A9BFF"
};

const { proxy }: any = getCurrentInstance();

const searchRef = ref(null);
const point = ref<string>("");
const drawerVisible = ref(false);
const showHistory = ref(false);
const type = ref<PageType>("detail");
const queryParams = ref<QueryParams>();
const tableData = ref<PointItem[]>([]);

const paginationInfo = reactive<PaginationType<number>>({
  currentPage: 1,
  pageSize: 20,
  total: 1
});

const allParams = computed<QueryForAlarmPointList>(() => {
  return {
    ...queryParams.value,
    pageNum: paginationInfo.currentPage,
    pageSize: paginationInfo.pageSize
  };
});

const route = useRoute();

const closeHistory = () => {
  showHistory.value = false;
};

const closeDrawer = () => {
  drawerVisible.value = false;
};

const getList = async () => {
  const res = await getAlarmPointList(allParams.value);
  paginationInfo.total = res.total;
  paginationInfo.pageSize = res.pageSize;
  paginationInfo.currentPage = res.pageNum;
  tableData.value = res.data;
};

const handleSearch = (params: QueryParams) => {
  queryParams.value = params;
  getList();
};
const handleExport = () => {
  searchRef.value?.search();
  proxy.download("post", "/sharing/api/v1/alarm/point/export", queryParams.value, "报警点位信息.xlsx");
};
const handleDownload = () => {
  proxy.download("get", "/sharing/api/v1/alarm/point/template/download", {}, "报警点位模板.xlsx");
};
const handleImport = async options => {
  try {
    const { file } = options;
    const formData = new FormData();
    formData.append("file", file);
    await importPoints(formData);
    PxMessage.success("批量导入成功");
    getList();
  } catch (error) {
    console.log(error);
  }
};
const handleShowDetail = (row: PointItem) => {
  type.value = "detail";
  point.value = row.point;
  drawerVisible.value = true;
};
const handleEdit = (row: PointItem) => {
  type.value = "edit";
  point.value = row.point;
  drawerVisible.value = true;
};
const handleShowHistory = (row: PointItem) => {
  point.value = row.point;
  showHistory.value = true;
};

if (!route.query.point) {
  getList();
} else {
  type.value = "edit";
  point.value = route.query.point as string;
  drawerVisible.value = true;
}
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
.equip-wrap-common .equip-form {
  padding-top: 0;
}
</style>
